<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" >
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png" >
    <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <title>我爱面试后台</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' >
    <meta name="viewport" content="width=device-width" >

    <!-- Bootstrap core CSS     -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" >

    <!--  Paper Dashboard CSS    -->
    <link href="../assets/css/amaze.css" rel="stylesheet" >

    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="../assets/css/demo.css" rel="stylesheet" >

    <!--     Fonts and icons     -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="../assets/css/font-muli.css" rel='stylesheet' type='text/css'>
    <link href="../assets/css/themify-icons.css" rel="stylesheet">
    <link href="../assets/vendors/sweetalert/css/sweetalert2.min.css" rel="Stylesheet" >


</head>

<body>
<div class="wrapper">
    <div class="sidebar" data-background-color="brown" data-active-color="danger">

        <div class="logo">
            <a href="#" class="simple-text">
                我爱面试后台
            </a>
        </div>
        <div class="logo logo-mini">
            <a href="#" class="simple-text">
                A
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li class="active">
                    <a href="../index.html">
                        <i class="ti-panel"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a data-toggle="collapse" href="#forms" class="collapsed" aria-expanded="false">
                        <i class="ti-clipboard"></i>
                        <p>
                            文章管理
                            <b class="caret"></b>
                        </p>
                    </a>
                    <div class="collapse" id="forms" role="navigation" aria-expanded="false" style="height: 0px;">
                        <ul class="nav">
                            <li><a href="../management/publish_article.html">发布文章</a></li>
                            <li><a href="../management/select_article.html">文章列表</a></li>
                        </ul>
                    </div>
                </li>

                <li>
                    <a data-toggle="collapse" href="#forms1" class="collapsed" aria-expanded="false">
                        <i class="ti-view-list-alt"></i>
                        <p>
                            博客管理
                            <b class="caret"></b>
                        </p>
                    </a>
                    <div class="collapse" id="forms1" role="navigation" aria-expanded="false" style="height: 0px;">
                        <ul class="nav">
                            <li><a href="../management/classify_article.html">文章分类管理</a></li>
                            <li><a href="../management/label_article.html">文章标签管理</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-minimize">
                    <button id="minimizeSidebar" class="btn btn-round btn-white btn-fill btn-just-icon">
                        <i class="ti-arrow-left"></i>
                    </button>
                </div>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"> 指示板 </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="ti-user"></i>
                                <p class="hidden-lg hidden-md">
                                    Notifications
                                    <b class="caret"></b>
                                </p>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">账户登录</a>
                                </li>
                                <li>
                                    <a href="#">注册账户</a>
                                </li>
                                <li>
                                    <a href="#" id="logout">退出登录</a>
                                </li>
                            </ul>
                        </li>


                        <li class="separator hidden-lg hidden-md"></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--            内容区域-->
        <div class="content" id="app">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <form  class="form-horizontal" >
                                <div class="header card-header-text">
                                    <h4 class="title">发布文章</h4>
                                </div>
                                <div class="content">
                                    <div >


                                        <fieldset>
                                            <div class="form-group">
                                                <label class="col-sm-1 control-label">文章标题</label>
                                                <div class="col-sm-11">
                                                    <input type="text" class="form-control" name="head" id="head" v-bind:value="artcles.head">
                                                </div>
                                            </div>

                                        </fieldset>


                                        <fieldset  >
                                            <div class="form-group">
                                                <label class="col-sm-1 control-label">文章分类</label>
                                                <div class="select col-sm-5">
                                                    <select class="form-control" id="select1" v-on:change="select_2()" >
                                                        <option v-for="(item, index) in titles" v-bind:value="item.id">
                                                            {{item.title_name}}
                                                        </option>
                                                    </select>
                                                </div>

                                                <label class="col-sm-1 control-label">文章标签</label>
                                                <div class="select col-sm-5">
                                                    <select class="form-control"  id="select2"  name="catalogue_id"  >
                                                        <option v-for="(item, index) in titles1" v-bind:value="item.id">
                                                            {{item.catalogue_name}}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </fieldset>

                                    </div>

                                    <fieldset>
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label">答:</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" placeholder="面试者回答" rows="15" id="text1" name="answer"  v-bind:value="artcles.answer"></textarea>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <fieldset>
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label">内容解析:</label>
                                            <div class="col-sm-10">
                                                    <textarea class="form-control"
                                                              placeholder="回答的内容解析---建议在本地markdown编译工具上写完复制进来然后点击解析Markdown查看效果,如果有图片的话建议将图片上传到阿里云oss里或者自己的服务器里通过地址进行访问图片"
                                                              rows="25" id="text2" name="context" v-bind:value="artcles.context"></textarea>
                                            </div>
                                        </div>
                                    </fieldset>


                                    <div class="card-footer text-center">
                                        <button type="button" class="btn btn-info btn-fill"  v-on:click="isSubmit()" >提交</button>


                                        <!-- Large modal -->
                                        <button type="button" class="btn btn-primary" id="markdown" data-toggle="modal" data-target=".example-modal-lg" v-on:click="markdown_click()">内容解析-解析Markdown </button>
                                    </div>






                                </div>


                            </form>
                        </div>
                    </div>
                </div>



            </div>



            <!--large modal-->
            <div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myLargeModalLabel">Markdown</h4>
                        </div>
                        <div class="modal-body row" id="content">

                        </div>
                        <div class="modal-footer">
                            <!--                                <button type="button" class="btn btn-default">Save changes</button>-->
                            <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>


            <!--                脚部-->
            <footer class="footer">
                <div class="container-fluid">
                    <nav class="pull-left">
                        <ul>
                            <li>
                                <a href="http://boke.huitoushian.cn" target="_blank">
                                    我的博客
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <p class="copyright pull-right">
                        &copy;
                        <script>
                            document.write(new Date().getFullYear())
                        </script>
                        <a href="http://www.17sucai.com/">胡安民</a>
                    </p>
                </div>
            </footer>
        </div>
    </div>
</div>

<script src="../../code/public_code.js"></script>
<!--   Core JS Files   -->
<script src="../assets/vendors/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../assets/vendors/jquery-ui.min.js" type="text/javascript"></script>
<script src="../assets/vendors/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/vendors/material.min.js" type="text/javascript"></script>
<script src="../assets/vendors/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<!-- Forms Validations Plugin -->
<script src="../assets/vendors/jquery.validate.min.js"></script>
<!--  Plugin for Date Time Picker and Full Calendar Plugin-->
<script src="../assets/vendors/moment.min.js"></script>
<!--  Charts Plugin -->
<script src="../assets/vendors/chartist.min.js"></script>
<!--  Plugin for the Wizard -->
<script src="../assets/vendors/jquery.bootstrap-wizard.js"></script>
<!--  Notifications Plugin    -->
<script src="../assets/vendors/bootstrap-notify.js"></script>
<!-- DateTimePicker Plugin -->
<script src="../assets/vendors/bootstrap-datetimepicker.js"></script>
<!-- Vector Map plugin -->
<script src="../assets/vendors/jquery-jvectormap.js"></script>
<!-- Sliders Plugin -->
<script src="../assets/vendors/nouislider.min.js"></script>
<!-- Select Plugin -->
<script src="../assets/vendors/jquery.select-bootstrap.js"></script>
<!--  DataTables.net Plugin    -->
<script src="../assets/vendors/jquery.datatables.js"></script>
<!-- Sweet Alert 2 plugin -->
<script src="../assets/vendors/sweetalert/js/sweetalert2.min.js"></script>
<!--	Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../assets/vendors/jasny-bootstrap.min.js"></script>
<!--  Full Calendar Plugin    -->
<script src="../assets/vendors/fullcalendar.min.js"></script>
<!-- TagsInput Plugin -->
<script src="../assets/vendors/jquery.tagsinput.js"></script>
<!-- Material Dashboard javascript methods -->
<script src="../assets/js/amaze.js"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>



<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="../assets/js/http_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../../code/js-cookie.js"></script>

<script>
    var login= getCookie("login")
    if(login==null){
        location.href="../user/login.html"
    }
</script>
<script type="text/javascript">

    $(function () {

        var  article
        function GetUrlParms()
        {
            var args = new Object();
            var query = location.search.substring(1); //获取查询串
            var pairs = query.split("&"); //在逗号处断开
            for (var i = 0; i < pairs.length; i++)
            {
                var pos = pairs[i].indexOf('='); //查找name=value
                if (pos == -1) continue; //如果没有找到就跳过
                var argname = pairs[i].substring(0, pos); //提取name
                var value = pairs[i].substring(pos + 1); //提取value
                args[argname] = unescape(value); //存为属性
            }
            return args;
        }

        var args = new Object();
        args = GetUrlParms();

        //如果要查找参数key:
        if (args["article"] != undefined)
        {
            //如果要查找参数key:
            article = args["article"];

        }

        if(article===undefined){
            location.href="../index.html"
        }

        console.log(article)






        var example1 = new Vue({
            el: '#app',
            data: {
                titles:[],
                titles1:[],
                artcles:{}

            },
            created(){


                //发送get请求  分类数据
                this.$http.get('http://'+http_ip+':8083/feign_article/articleId?articleId='+article).then(function (res) {
                    this.artcles=res.data.data
                    this.titles_v()
                }, function () {
                    console.log('请求失败处理');
                });






            },
            methods:{
                titles_v:function () {
                    //发送get请求  分类数据
                    this.$http.get('http://'+http_ip+':8083/feign_title').then(function (res) {
                        this.titles = res.data.data;
                        //发送get请求  标签
                        this.$http.get('http://' + http_ip + ':8083/feign_catalogue/all').then(function(res) {

                            for (var i = 0; i < this.titles.length; i++) {
                                for (var i1 = 0; i1 < res.body.data.length; i1++) {
                                   var cataloguesta=res.body.data[i1]
                                    if (this.titles[i].id === res.body.data[i1].title_id && res.body.data[i1].id===this.artcles.catalogue_id ) {
                                        var obj={id: this.titles[i].id, title_name: this.titles[i].title_name, size: 0}
                                        let newArr=this.titles.filter(dao => {
                                            return   dao.title_name!=this.titles[i].title_name
                                        })
                                        this.titles=newArr
                                        this.titles.unshift(obj)
                                        //发送get请求  标签数据
                                        this.$http.get('http://'+http_ip+':8083/feign_catalogue?titleId='+this.titles[i].id).then(function (res) {
                                            this.titles1 = res.data.data;
                                            var obj=  {
                                                "id":cataloguesta.id,
                                                "title_id":cataloguesta.title_id,
                                                "catalogue_name":  cataloguesta.catalogue_name,
                                                "catalogue_size": 0
                                            }
                                            let newArr= this.titles1.filter(dao => {
                                                return   dao.catalogue_name!=cataloguesta.catalogue_name
                                            })
                                            this.titles1=newArr;
                                            this.titles1.unshift(obj)

                                        }, function () {
                                            console.log('请求失败处理');
                                        });

                                        return false;
                                    }
                                }
                            }


                        }, function() {
                            console.log('请求失败处理');
                        });

                    }, function () {
                        console.log('请求失败处理');
                    });
                },
                select_2:function () {
                    var select_id = $("#select1").val()
                    if (select_id==0) {
                        this.titles1=[];
                    }
                    //发送get请求  标签数据
                    this.$http.get('http://'+http_ip+':8083/feign_catalogue?titleId='+select_id).then(function (res) {
                        this.titles1 = res.data.data;
                        console.log( this.titles1)
                        this.titles1.unshift({
                            "id": "0",
                            "title_id": "0",
                            "catalogue_name": "请选择:",
                            "catalogue_size": 0
                        })

                    }, function () {
                        console.log('请求失败处理');
                    });

                },

                markdown_click:function () {

                    var text2= $("#text2").val()
                    document.getElementById('content').innerHTML = marked(text2);
                    $("#content img").addClass("img-responsive center-block");

                },
                isSubmit:function(){

                    var head= $("#head").val()
                    if(head===""){
                        alert("文章标题不能为空")
                        $("#head").focus();
                        return false;
                    }
                    var select1= $("#select1").val()
                    if(select1==0){
                        alert("文章分类不能为空")
                        $("#select1").focus();
                        return false;

                    }
                    var select2= $("#select2").val()
                    if(select2===""||select2===null){
                        alert("标签不能为空")
                        $("#select2").focus();
                        return false;
                    }


                    var text1= $("#text1").val()
                    if(text1===""||text1===null){
                        alert("答不能为空")
                        $("#text1").focus();
                        return false;
                    }


                    var text2= $("#text2").val()
                    if(text2===""||text2===null){
                        text2="无内容解析"
                    }
                    var c=new Date();
                    var riqi=(c.getFullYear()+"-"+(c.getMonth()+1)+"-"+c.getDate())  //获取年月日
                    var shij=(c.getHours()+":"+c.getMinutes()+":"+c.getSeconds())  //获取时分秒
                    var ti=riqi+" "+shij
                    var time=ti

                    // "946-2021qK7lE20vX4nS21vQ39m574I-416"


                    //发送get请求  标签数据
                    this.$http.post('http://'+http_ip+':8083/feign_article/up',{'id':article,'head':head,'catalogue_id':select2,'answer':text1,'context':text2,'time':time}).then(function (res) {

                        alert(res.bodyText)
                        if(res.bodyText==="修改成功"){
                            location.href="./select_article.html"
                        }


                    }, function () {
                        console.log('请求失败处理');
                    });

                }

            }
        })


    })




    $(".modal-backdrop").removeClass("modal-backdrop")



    //注销登录
    $("#logout").click(function () {
        delCookie("login")

        location.reload()

    })
</script>

</body>
</html>
